<template>
	<el-drawer title="查看子级" :visible.sync="visible" size="600px" append-to-body>
		<div class="sw_dict_container" v-loading="loading">
			<div class="query">
				<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenEnumForm()"></el-button>
				<el-input size="small" placeholder="请输入内容" clearable style="width: 200px" v-model="queryData.deName">
					<el-button slot="append" icon="el-icon-search" @click="getEnumData"></el-button>
				</el-input>
			</div>
			<div class="table">
				<el-table size="medium" :data="tableData" height="100%" style="width: 100%">
					<el-table-column prop="deName" label="名称" min-width="180"></el-table-column>
					<el-table-column prop="deValue" label="值" min-width="100"></el-table-column>
					<el-table-column prop="content" label="描述" min-width="180"></el-table-column>
					<el-table-column label="操作" width="96">
						<template slot-scope="{ row }">
							<el-button size="medium" type="text" v-if="tableData.length > 0" @click="handleOpenEnumForm(row)">编辑</el-button>
							<el-button size="medium" type="text" @click="handleDeleteEnum(row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<enum-form v-model="enumDialog" :dict-id="dictId" :enum-data="enumData" @refresh="getEnumData"></enum-form>
	</el-drawer>
</template>

<script>
import enumForm from './dataForm';
import { getDictDetailList, deleteDictDetail } from '@/api/system/tbSysDictDetail';
export default {
	components: { enumForm },
	props: {
		value: {
			type: Boolean,
			default: false
		},
		dictId: String
	},
	data() {
		return {
			loading: false,
			visible: this.value,
			queryData: {
				page: 1,
				limit: 9999
			},
			tableData: [],
			enumDialog: false,
			enumData: {}
		};
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
			if (!flag) return false;
			this.loading = true;
			this.getEnumData();
		}
	},
	methods: {
		//获取枚举数据
		async getEnumData() {
			let params = { ...this.queryData, dictId: this.dictId };
			let result = await getDictDetailList(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.tableData = !result.data ? [] : result.data;
			}
		},

		//新增枚举数据
		handleOpenEnumForm(data) {
			this.enumDialog = true;
			this.enumData = !data ? {} : { ...data };
		},

		//删除枚举数据
		handleDeleteEnum(row) {
			let that = this;
			that.$confirm(`此操作将删除枚举<font color="#f00">【${row.deName}】</font>, 是否继续?`, '删除提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				dangerouslyUseHTMLString: true,
				type: 'warning',
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await that.deleteEnumRequest(row);
						instance.confirmButtonLoading = false;
						done();
					} else {
						done();
					}
				}
			}).catch(() => {});
		},

		//删除枚举请求
		async deleteEnumRequest(row) {
			let result = await deleteDictDetail(row.id).then((res) => res.data);
			if (result.code === '0') {
				this.loading = true;
				this.getEnumData();
				this.$message.success('删除枚举成功');
				this.$store.dispatch('getOpenDictData');
			} else {
				this.$message.success('删除枚举失败');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.sw_dict_container {
	display: flex;
	flex-direction: column;
	height: 100%;

	.query ::v-deep {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		flex-shrink: 0;
		border-bottom: solid 1px #ebeef5;

		.el-input-group__append {
			padding: 0 10px;
			overflow: hidden;
		}
	}

	.table {
		flex: 1;
		overflow: hidden;
	}
}
</style>
